- page_title _('Domain Verification')

%h1.page-title.gl-font-size-h-display
  = _('Domain Verification')

%p.gl-text-secondary
  = s_('DomainVerification|The following domains are configured for projects in this group. Users with email addresses that match a verified domain do not need to confirm their account.')
  = link_to s_('DomainVerification|How do I configure a domain?'), help_page_path('user/enterprise_user/index.md', anchor: 'verified-domains-for-groups')

= render Pajamas::CardComponent.new(card_options: { class: 'gl-new-card js-toggle-container' }, header_options: { class: 'gl-new-card-header' }, body_options: { class: 'gl-new-card-body gl-px-0' }) do |c|
  - c.with_header do
    .gl-new-card-title-wrapper
      %h3.gl-new-card-title
        = _('Domains')
      .gl-new-card-count
        = sprite_icon('link', css_class: 'gl-mr-2')
        = @domains.size
    .gl-new-card-actions
      = render Pajamas::ButtonComponent.new(size: :small, href: new_group_settings_domain_verification_path(@group)) do
        = s_("DomainVerification|Add Domain")
  - c.with_body do
    .table-holder
      %table.table.b-table.gl-table.b-table-stacked-md{ role: 'table' }
        %thead
          %tr
            %th= _('Domain')
            %th= _('Source project')
            %th= _('Verification status')
            %th.gl-text-right= _('Actions')
        %tbody
          %tr.js-domain-empty-state{ class: @domains.empty? ? '' : 'gl-display-none!' }
            %td{ colspan: 4, class: 'gl-py-6! text-center' }
              = s_("DomainVerification|No domains configured. Create a domain in a project in this group hierarchy.")
          - @domains.each do |domain|
            %tr.js-domain-row{ id: "domain#{domain.id}" }
              %td{ class: 'gl-vertical-align-middle!', data: { label: _('Domain') } }
                = domain.domain
              %td{ class: 'gl-vertical-align-middle!', data: { label: _('Source project') } }
                - project = domain.project
                = link_to project.full_path, project_path(project)
              %td{ class: 'gl-vertical-align-middle!', data: { label: _('Verifications status') } }
                = domain.verified? ? _('Verified') : _('Unverified')
              %td{ data: { label: _('Actions') } }
                .btn-group.gl-float-right.gl-mt-n2.gl-mb-n2{ class: 'gl-text-left! gl-pl-0!' }
                  - if can_verify_group_domain?(domain)
                    = render Pajamas::ButtonComponent.new(icon: "redo", href: verify_group_settings_domain_verification_path(@group, domain), button_options: { data: { method: :post } })
                  = render Pajamas::ButtonComponent.new(icon: "pencil", href: group_settings_domain_verification_path(@group, domain))
                  = render Pajamas::ButtonComponent.new(category: :secondary, variant: :danger, icon: "remove", href: group_settings_domain_verification_path(@group, domain), button_options: { data: { confirm: s_("DomainVerification|Are you sure you want to delete this domain?"), confirm_btn_variant: "danger", remote: true, method: :delete, title: s_("DomainVerification|Delete domain") }, 'aria-label': s_("DomainVerification|Delete domain"), class: "js-remove-domain" })
